<template>
	<div class="select-coach">
    <ul class="list-coachs" v-if="coachArr.length > 0">
      <li v-for="(item, index) in coachArr" :key="index" :class="{'active': activeIndex==index}" @click="changeIndex(index)">
        <div class="cover"><img :src="item.portraitPictureFileUrl ? item.portraitPictureFileUrl : 'https://newmefit.cn/resource/gym/base/base1.jpg'" mode="aspectFit"></div>
        <div class="course-info">
          <h4>{{item.userName}}</h4>
          <uni-rate v-model="item.starLevel" :readonly="true"/>
        </div>
      </li>
    </ul>
    <div class="no-data" v-if="coachArr.length === 0">
      <img src="https://newmefit.cn/resource/gym/base/base6.png">
    </div>
    <div class="footer">
      <span class="next" @click="submit">确认</span>
    </div>
	</div>
</template>

<script>
  import { listStoreEnabled , listCoachByStoreIdAndMemberUserId } from '@/api/manageApi'
  import {getStore, setStore} from '@/util/service'
  import {mapGetters} from 'vuex'
	export default {
		data() {
			return {
        page: 1,
        limit: 10,
        more: 'more',
        rateValue: 5,
        coachArr: [],
        storeName: '',
        activeIndex: -1
			}
    },
    computed:{
			...mapGetters(['uniToken', 'userInfo'])
		},
		onLoad (option) {
      if (option.role == 'member') {
        this.listCoachByStoreIdAndMemberUserId()
      } else {
        this.getListStoreEnabled()
      }
    },
		methods: {
      changeIndex (index) {
        this.activeIndex = index
      },
      listCoachByStoreIdAndMemberUserId () {
        var params = {
          memberUserId: this.userInfo.userId, // 张柏芝
          storeId: getStore('storeId')
        }
        listCoachByStoreIdAndMemberUserId(params).then(res => {
          // console.log(res)
          if (res.code == 200) {
            var data = res.data
            this.coachArr = data
            // console.log(this.coachArr)
          }
        })
      },
      // 获取推荐教练列表
      getListStoreEnabled () {
        var params = {
          storeId: getStore('coachStoreId'),
          recommend: 0
        }
        listStoreEnabled(params).then(res => {
          // console.log(res)
          if (res.code == '200') {
            var data = res.data
            this.coachArr = data
          }
        })
      },
      submit () {
        if (this.activeIndex === -1) {
          this.uShowToast('请选择教练')
        } else {
          this.getOpenerEventChannel().emit('sonPageData', this.coachArr[this.activeIndex])
          this.goBackUrl()
        }
      }
		}
	}
</script>

<style lang="scss">
.select-coach{
  width: 702rpx;
  margin: 0 auto;
  .list-coachs{
    width: 100%;
    li{
      width: 100%;
      height: 144rpx;
      background: #FFFFFF;
      border: 2px solid #fff;
      border-radius: 25rpx;
      box-sizing: border-box;
      padding: 24rpx 28rpx;
      display: flex;
      margin-top: 24rpx;
      position: relative;
      .cover{
        width: 88rpx;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 50%;
        margin-right: 20rpx;
        text-align: center;
        img{
          max-width: 100%;
          max-height: 100%;
          vertical-align: middle;
          border-radius: 15rpx;
        }
      }
      h4{
        font-size: 30rpx;
        color: #1E1E1E;
        line-height: 30rpx;
        margin-bottom: 13rpx;
      }
      i{
        padding: 0 30rpx;
        height: 36rpx;
        line-height: 36rpx;
        background: #FFFFFF;
        border-radius: 5rpx;
        border: 1px solid #BFBFBF;
        font-size: 22rpx;
        color: #838383;
        display: inline-block;
        margin-right: 10rpx;
      }
      .uni-rate{
        margin: 10rpx 0;
      }
    }
    li.active{
      border: 2px solid #FF5D3D;
    }
    li.active::after{
      content: '';
      width: 52rpx;
      height: 52rpx;
      background: #FF5D3D;
      border-radius: 0rpx 20rpx 0rpx 50rpx;
      background: url('../../static/s3.png') no-repeat 0 0;
      background-size: cover;
      position: absolute;
      right: -2rpx;
      top: -2rpx;
    }
  }
  .footer{
    width: 750rpx;
    height: 128rpx;
    background: #FFFFFF;
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 0;
    span{
      margin-top: 24rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      display: inline-block;
      border-radius: 40rpx;
      background: #FF5D3D;
      font-size: 32rpx;
      color: #FFFFFF;
    }
    .next{
      width: 646rpx;
    }
    .pre-step{
      width: 328rpx;
      background: #FFFFFF;
      border: 1px solid #FF5A20;
      color: #FF5A20;
      margin-right: 30rpx;
    }
    .next-step{
      width: 328rpx;
    }
  }
}
</style>
